<template>
  <div class="container">
    <div class="search">
      <el-form :inline="true" :model="searchForm" class="demo-form-inline" ref="ruleForm">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="searchForm.username" placeholder="用户名"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="searchForm.email" placeholder="邮箱"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="is_active">
          <el-select v-model="searchForm.is_active" placeholder="状态">
            <el-option label="正常" value="1"></el-option>
            <el-option label="禁用" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button type="primary" @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="header">
      <el-button type="primary" plain size="small" @click="showAddForm">新增</el-button>
      <el-button type="danger" plain size="small" @click="batchDelete">批量删除</el-button>
    </div>
    <div class="table">
      <el-table
        :data="tableData"
        @selection-change="handleSelectionChange"
        style="width: 100%">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          prop="username"
          label="用户名">
        </el-table-column>
        <el-table-column
          prop="nick_name"
          label="昵称">
        </el-table-column>
        <el-table-column
          prop="age"
          label="年龄">
        </el-table-column>
        <el-table-column
          prop="email"
          label="邮箱">
        </el-table-column>
        <el-table-column
          prop="role"
          label="角色">
        </el-table-column>
        <el-table-column
          prop="dept"
          label="部门">
        </el-table-column>
        <el-table-column
          prop="is_active"
          label="状态">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.is_active"
              :active-value="1"
              :inactive-value="0"
              @change="changeState(scope.row)"
              active-text="正常"
              inactive-text="禁用"
              active-color="#13ce66"
              inactive-color="#ff4949">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">编辑
            </el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="paginator">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5,10, 20, 30, 40]"
        :page-size=size
        layout="total, sizes, prev, pager, next, jumper"
        :total=total>
      </el-pagination>
    </div>
    <!--    弹窗-->
    <div>
      <el-dialog :title="title" :visible.sync="dialogFormVisible" @close="clearInfo">
        <el-form :model="form" :rules="rules" ref="formData">
          <el-form-item label="用户名" :label-width="formLabelWidth" prop="username">
            <el-input v-model="form.username" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="昵称" :label-width="formLabelWidth" prop="nick_name">
            <el-input v-model="form.nick_name" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="状态" :label-width="formLabelWidth" prop="is_active">
            <el-select v-model="form.is_active" placeholder="请选择" style="width: 100%">
              <el-option label="正常" :value="1"></el-option>
              <el-option label="禁用" :value="0"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="邮箱" :label-width="formLabelWidth" prop="email">
            <el-input v-model="form.email" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="年龄" :label-width="formLabelWidth" prop="age">
            <el-input v-model="form.age" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="部门" :label-width="formLabelWidth" prop="dept_id">
            <el-select v-model="form.dept_id" placeholder="请选择" style="width: 100%">
              <el-option
                v-for="dept in depts"
                :key="dept.id"
                :label="dept.name"
                :value="dept.id">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="角色" :label-width="formLabelWidth" prop="role_id">
            <el-select v-model="form.role_id" placeholder="请选择" style="width: 100%">
              <el-option
                v-for="role in roles"
                :key="role.id"
                :label="role.role_zh"
                :value="role.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitForm">确 定</el-button>
        </div>
      </el-dialog>

    </div>
  </div>
</template>

<script>
import {title} from "@/settings";
import {dept_delete, dept_list} from "@/api/dept";
import {role_list} from "@/api/role";
import {batchRemove, changeUserState, insert_edit_user, user_one, userPage} from "@/api/user";

export default {
  name: 'index',
  data() {
    return {
      multipleSelection: [],
      roles: [],
      depts: [],
      title: '新增',
      dialogFormVisible: false,
      formLabelWidth: "80px",
      currentPage: 1,
      size: 5,
      total: 0,
      tableData: [],
      searchForm: {
        'username': "",
        "is_active": "",
        "email": "",
      },
      form: {
        'username': "",
        'nick_name': "",
        "is_active": "",
        "age": "",
        "email": "",
        "role_id": "",
        "dept_id": ""
      },
      rules: {
        username: [
          {required: true, message: '请输入用户名', trigger: 'blur'},
        ],
        nick_name: [
          {required: true, message: '请输入昵称', trigger: 'blur'}
        ],
        is_active: [
          {required: true, message: '请选择用户状态', trigger: 'blur'}
        ],
        age: [
          {required: true, message: '请输入年龄', trigger: 'blur'}
        ],
        email: [
          {required: true, message: '请输入邮箱', trigger: 'blur'}
        ],
        role: [
          {required: true, message: '请选择角色', trigger: 'blur'}
        ],
        dept: [
          {required: true, message: '请选择部门', trigger: 'blur'}
        ]
      }
    }
  },
  methods: {
    // 改变用户状态
    changeState(row) {
      changeUserState({id: row.id, active: row.is_active}).then(response => {
        this.$notify.success(response.message)
        this.tableDataPage()
      })
    },
    // 重置 搜索表单数据
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.currentPage = 1
      this.tableDataPage()
    },
    // 搜索
    onSubmit() {
      this.currentPage = 1
      this.tableDataPage()
    },
    // 批量删除
    batchDelete() {

      if (this.multipleSelection.length == 0) {
        this.$notify.warning('请至少选择一条数据')
        return false
      }
      this.$confirm('此操作将永久删除数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 发送异步请求
        batchRemove({ids: this.multipleSelection}).then(response => {
          this.$notify.success(response.message)
          this.tableDataPage()
        })
      }).catch(() => {
        this.$notify({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    handleSelectionChange(val) {
      // 将选中行id 存储在multipleSelection
      this.multipleSelection = val.map(item => item.id)
    },
    showAddForm() {
      //获取部门列表数据
      dept_list().then(response => {
        this.depts = response.depts
      })
      // 获取角色列表数据
      role_list().then(response => {
        this.roles = response.roles
      })

      this.dialogFormVisible = true
    },
    clearInfo() {
      this.form = {
        'username': "",
        'nick_name': "",
        "is_active": "",
        "age": "",
        "email": "",
        "role_id": "",
        "dept_id": ""
      }
      // 清空校验规则
      this.$refs.formData.clearValidate()
      this.title = "新增"
    },
    submitForm() {
      this.$refs.formData.validate(val => {
        if (val) {
          insert_edit_user(this.form).then(response => {
            this.dialogFormVisible = false
            this.$notify.success({
              type: "success",
              message: response.message,
            })
            this.tableDataPage()
          })
        } else {
          this.$notify.warning('请填写完整的表单数据')
        }
      })
    },
    handleSizeChange(val) {
      this.size = val
      this.tableDataPage()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.tableDataPage()
    },
    handleEdit(index, row) {
      role_list().then(response => {
        this.roles = response.roles
      })
      dept_list().then(response => {
        this.depts = response.depts
      })
      this.title = '编辑'
      this.dialogFormVisible = true
      // 发送异步请求 获取角色信息
      user_one(row.id).then(response => {
        this.form = response.user
      })
    },
    handleDelete(index, row) {
      this.$confirm('此操作将永久删除数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 发送异步请求删除数据
        batchRemove({ids:[row.id]}).then(response=>{
          this.$notify.success(response.message)
          this.tableDataPage()
        })
      }).catch(() => {
        this.$notify({
          type: 'info',
          message: '已取消删除'
        });
      });

    },
    tableDataPage() {
      userPage({
        page: this.currentPage,
        size: this.size,
        username: this.searchForm.username,
        email: this.searchForm.email,
        is_active: this.searchForm.is_active
      }).then(response => {
        this.total = response.total
        this.tableData = response.table_data
      })
    }
  },
  created() {
    this.tableDataPage()
  }
}
</script>


<style scoped lang="scss">
.container {
  padding: 20px;
  box-sizing: border-box;
}

.header {
  margin-top: 20px;
  margin-bottom: 20px;
}

.paginator {
  margin-top: 15px;
}

.search {
  border-bottom: 1px solid #cccccc;
  margin-top: 10px;
}
</style>


